<script>
import { useVModel } from '@vueuse/core'
import { provide } from 'vue'
export default {
  name: 'XtxTabs',
  render() {
    // 获取插槽的内容
    const panes = this.$slots.default()
    // 在使用xtx-tabs组件时，可以传入的是循环的xtx-tabs-pane组件，此时下面的写法就出问题，为了兼容传入多个或者传入循环的xtx-tabs-pane组件的情况，就需要对panes做处理
    const dynamicPanes = []
    panes.forEach(item => {
      if (item.type.name === 'XtxTabsPane') {
        dynamicPanes.push(item)
      } else {
        item.children.forEach(v => {
          dynamicPanes.push(v)
        })
      }
    })
    // 创建nav标签，标签内部由多个a链接而构成
    const nav = <nav>
      {dynamicPanes.map((item, i) => {
        return (<a
          onclick={() => this.changeTab(item.props.name, i)}
          href="javascript:;"
          class={{ active: item.props.name === this.activeName }}>
          {item.props.label}
        </a>)
      })}
    </nav>
    return <div class="xtx-tabs">{[nav, dynamicPanes]}</div>
  },
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  setup(props, { emit }) {
    // 实现双向数据绑定
    const activeName = useVModel(props, 'modelValue', emit)
    // 向后代组件提供activeName
    provide('activeName', activeName)
    // 实现tab栏的切换
    const changeTab = (currTab, index) => {
      activeName.value = currTab
      // 触发父组件的自定义事件，将当前的选中的tab及索引返回到父组件中使用
      emit('tab-click', { currTab, index })
    }
    return { activeName, changeTab }
  }
}
</script>
<style lang="less" scoped>
.xtx-tabs {
  background: #fff;

  >nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    >a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;

      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>